﻿<template>
    <div>
        <h2>你好,欢迎来到Message路由组件</h2>
        <ul>
            <li v-for="n in newMsg" :key="n.id">
                <router-link :to="`/home/message/detail/${n.id}/${n.name}`">{{n.name}}</router-link>
                <button @click="pushShow(n)">push查看</button>
                <button @click="replaceShow(n)">replace查看</button>
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    import {nanoid} from 'nanoid'//npm i nanoid
    export default {
        name: 'Message',
        components:{},
        data() {
            return {
                newMsg:[
                    {
                        id:nanoid(),
                        name: '消息1'
                    },
                    {
                        id:nanoid(),
                        name: '消息2'
                    },
                    {
                        id:nanoid(),
                        name: '消息3'
                    },
                ]
            }
        },
        methods:{
            pushShow(n){
                // console.log(this.$router)
                this.$router.push({//跟to的对象写法里面的配置一模一样
                    name: 'xiangqing',
                    query:{
                        id: n.id,
                        name: n.name
                    }
                })
            },
            replaceShow(n){
                this.$router.replace({
                    name: 'xiangqing',
                    query:{
                        id: n.id,
                        name: n.name
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>